<template>
  <ACard :title="null" :bordered="false" class="search-card card-wrapper">
    <AForm ref="formRef" :model="model" :label-col="{
      span: 5,
      md: 7
    }" class="search-form">
    <div class="w-full flex">
      <ARow :gutter="[15, 8]" wrap class="w-full">
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
            <AFormItem label="菜单名称" name="model" class="m-0" :label-col="{}">
              <AInput v-model:value="model.menuName" placeholder="请输入菜单名称" class="min-form-control" allowClear autocomplete="off"/>
            </AFormItem>
          </ACol>
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
            <AFormItem label="状态" name="model" class="m-0" :label-col="{}">
              <ASelect v-model:value="model.status as any" placeholder="请选择状态" class="min-form-control" allowClear>
                <ASelectOption value="0">正常</ASelectOption>
                <ASelectOption value="1">禁用</ASelectOption>
              </ASelect>
            </AFormItem>
          </ACol>
          <div class="flex">
            <AFormItem class="m-0">
              <div class="w-full flex-y-center justify-end gap-12px">
                <AButton type="primary" ghost class="mini-btn" @click="search">
                  <template #icon>
                    <icon-ic-round-search class="align-sub text-icon" />
                  </template>
                  <span class="ml-3px">{{ $t('common.search') }}</span>
                </AButton>
                <AButton class="mini-btn" @click="reset">
                  <template #icon>
                    <icon-ic-round-refresh class="align-sub text-icon" />
                  </template>
                  <span class="ml-3px">{{ $t('common.reset') }}</span>
                </AButton>
              </div>
            </AFormItem>
          </div>
        </ARow>
    </div>
    </AForm>
  </ACard>

</template>

<script setup lang="tsx">
defineOptions({
  name: 'MenuSearch'
});

interface Emits {
  (e: 'search',model:MenuPageListApi.MenuTableListParams): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<MenuPageListApi.MenuTableListParams>('model', { required: true });

function search(){
  emit('search',model.value)
}

function reset(){
  model.value = {
    menuName: "",
    status: '',
  }
  emit('search',model.value)
}

</script>

<style></style>
